<!DOCTYPE html>
<!--
 Copyright 2023 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{.Tool}} Dashboard</title>
  <link href="/assets/main.css" rel="stylesheet" />
  <!-- https://css-tricks.com/emoji-as-a-favicon/ -->
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧶</text></svg>">
  <style>
    /* Style for the trace table. */
    #traces {
      width: 100%;
    }
    #traces th, #traces td {
      border: 1pt solid black;
    }
  </style>
</head>

<body>
  <header class="navbar">
    <a href="/">{{.Tool}} dashboard</a>
  </header>
  <script type="text/javascript">
    // The code below largely taken from:
    //   https://perfetto.dev/docs/visualization/deep-linking-to-perfetto-ui
    const ORIGIN = 'https://ui.perfetto.dev';
    
    async function fetchAndOpen(traceUrl) {
      const resp = await fetch(traceUrl);
      const blob = await resp.blob();
      const arrayBuffer = await blob.arrayBuffer();
      openTrace(arrayBuffer, traceUrl);
    }
    
    function openTrace(arrayBuffer, traceId, traceUrl) {
      const win = window.open(ORIGIN);
      if (!win) {
        alert('Popups blocked. Please allow popups in order to be able to' +
              'see traces');
        return
      }
      const timer = setInterval(() => win.postMessage('PING', ORIGIN), 50);
      const onMessageHandler = (evt) => {
        if (evt.data !== 'PONG') return;
    
        // We got a PONG, the UI is ready.
        window.clearInterval(timer);
        window.removeEventListener('message', onMessageHandler);
    
        const reopenUrl = new URL(location.href);
        reopenUrl.hash = `#reopen=${traceUrl}`;
        win.postMessage({
          perfetto: {
            buffer: arrayBuffer,
            title: 'Trace Id ' + traceId,
            url: reopenUrl.toString(),
        }}, ORIGIN);
      };
    
      window.addEventListener('message', onMessageHandler);
    }
  </script>
  <div class="container">
  <div class="card">
    <div class="card-title">Traces</div>
    <div class="card-body">
    <table id = buckets class = "data-table">
        <tbody>
            <tr>
                <td><a href="/traces?id={{.ID}}&lat_hi=1ms">0-1ms</a></td>
                <td><a href="/traces?id={{.ID}}&lat_low=1ms&lat_hi=10ms">1-10ms</a></td>
                <td><a href="/traces?id={{.ID}}&lat_low=10ms&lat_hi=100ms">10-100ms</a></td>
                <td><a href="/traces?id={{.ID}}&lat_low=100ms&lat_hi=1s">100ms-1s</a></td>
                <td><a href="/traces?id={{.ID}}&lat_low=1s&lat_hi=10s">1-10s</a></td>
                <td><a href="/traces?id={{.ID}}">all</a></td>
                <td><a href="/traces?id={{.ID}}&errs=true">errors</a></td>
            </tr>
        </tbody>
    </table>
    <br>
    <table id="traces" class="data-table">
        <thead>
        <tr>
            <th scope="col">Trace URL</th>
            <th scope="col">Start Time</th>
            <th scope="col">Latency</th>
            <th scope="col">Status</th>
        </tr>
        </thead>
        <tbody>
        {{range .Traces}}
            <tr>
            <td><a href="javascript:fetchAndOpen('/tracefetch?trace_id={{.TraceID}}')">link</a></td>
            <td>{{.StartTime}}</td>
            <td>{{sub .EndTime .StartTime}}</td>
            <td>{{.Status}}</td>
            </tr>
        {{end}}
        </tbody>
    </table>
    </div>
  </div>
</body>
</html>
